import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { View, Image, Input, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import utils from '@/utils/index';

import './index.scss';

const BindWalletCodePage = ({ dispatch, sendResult = false, appName }) => {
  const [code, setCode] = useState('');
  const [getCodeText, setGetCodeText] = useState('发送验证码');
  const cutDownTime = useRef(60); //60s
  const lock = useRef(false);
  const mobile = utils.getMobile() || '';

  const getCode = () => {
    if (lock.current) {
      return;
    }
    if (getCodeText != '发送验证码') {
      return;
    }
    lock.current = true;

    dispatch({
      type: 'otherApi/getWalletBindCode',
      payload: {
        mobile,
      },
    });
  };

  const bindDigitWallet = () => {
    if (code.length !== 6) {
      Taro.showToast({
        title: '请输入6位验证码',
        duration: 2000,
        icon: 'none',
      });
      return;
    }
    dispatch({
      type: 'otherApi/getWalletBind',
      payload: {
        mobile,
        code,
        bankCode: 'BOC',
        bankName: '中国银行',
      },
    });
  };

  useEffect(() => {
    if (appName.length > 0) {
      Taro.setNavigationBarTitle({
        title: appName == 'suXiaoFu' ? '苏小福' : '',
      });
    }
  }, []);

  useEffect(() => {
    if (sendResult) {
      dispatch({
        type: 'otherApi/setBindCodeSend',
        payload: {
          bindCodeSend: false,
        },
      });
      let timer = setInterval(function () {
        cutDownTime.current--;
        if (cutDownTime.current <= 0) {
          clearInterval(timer);
          setGetCodeText('发送验证码');
          cutDownTime.current = 60;
          lock.current = false;
          return;
        }
        setGetCodeText(`${cutDownTime.current}秒后重发`);
      }, 1000);
    }
  }, [sendResult]);

  return (
    <View className="totalPage_bindWalletCode">
      <Image
        className="banner"
        src="https://ht-fine-static.oss-cn-beijing.aliyuncs.com/weapp/aNeedUp/bindBn.jpg"
      ></Image>
      <View className="item">
        <Text className="number">{mobile}</Text>
        <Text className="lable">微信绑定手机号</Text>
      </View>
      <View className="item next">
        <Input
          className="code"
          type="number"
          maxlength={6}
          value={code}
          placeholder="输入6位验证码"
          placeholderStyle="color:#E5E5E5"
          onInput={(e) => {
            setCode(e.detail.value);
          }}
        />
        <View
          className={['codeBtn', getCodeText !== '发送验证码' && 'inActive'].join(' ')}
          onClick={getCode}
        >
          {getCodeText}
        </View>
      </View>
      <View className={['btn', code.length == 6 && 'active'].join(' ')} onClick={bindDigitWallet}>
        绑定中行数字钱包
      </View>
    </View>
  );
};

export default connect(({ otherApi }) => ({
  sendResult: otherApi.bindCodeSend,
  appName: otherApi.appName,
}))(BindWalletCodePage);
